<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <title>小微商城-弹窗</title>
    <script src="../assets/js/flexible.js"></script>
    <link rel="stylesheet" href="../assets/css/common.css">
</head>
<body>
    <header class="header">
        <a href="javascript:history.back(-1)"><i class="iconfont icon-rt"></i></a>
        <span>弹窗</span>
    </header>
    <div class="content">
        <button id="toastBtn">我是 toast 弹窗</button>
        <button id="popBtn">我是 pop 弹窗</button>
    </div>
    <div class="toast">数据错误，请稍后再试</div>

    <!-- 自开发弹出层：选择内容过多，需要滚动 -->
    <div class="popup" id="popup">
        <div class="pop-container">
            <h3>提示</h3>
            <!--副标题如果需要取消注释-->
            <!--<h5>数据错误提示</h5>-->
            <div class="popcont">
              <p>数据错误，请稍后再试</p>
            </div>
            <div class="popbtn">
                <a class="left cancel">取消</a>
                <a id="yes">确认</a>
            </div>
        </div>
    </div>
</body>
<script src="../assets/js/jquery-1.11.2.min.js"></script>
<script>
    // toast
    $(function () {
        $(".toast").hide();
        $("#toastBtn").click(function () {
            $('.toast').show().delay(1000).hide(0);
        });
    });

    // 自开发弹出层
    $(function(){
        $("#yes, .cancel").click(function(){
            $(".popup").hide();
            $("body").css("overflow", "auto");
        });
    });
    $("#popBtn").click(function () {
        $("#popup").show();
        $("body").css("overflow", "hidden");
    });
</script>
</html>